<template>
	<view class="master-manage">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<view class="master-list">
			<view class="master-item" v-for="(item,index) in masterList" :key="index">
				<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{item.nickname}} - {{item.mobile}}</view>
					<view class="region">
						<view class="tit">配送区域：
							<uni-icons type="eye-slash-filled" size="22" v-if="item.is_expand"
								@click="handleArea(index)"></uni-icons>
							<uni-icons type="eye" size="22" v-else @click="handleArea(index)"></uni-icons>
						</view>
						<template v-if="item.is_expand">
							<view class="bd" :style="item.is_expand ? 'visibility: visible' : 'visibility: hidden'">
								<view class="area-item" v-for="(area,area_i) in item.towns_list" :key="area_i">
									<view class="area-name">{{area.areaName}}:</view>
									<view class="town">
										<view class="town-item" v-for="(town,town_i) in area.townList" :key="town_i">
											{{town.townName}}
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
					<view class="grid">
						<view class="grid-item">
							<text class="label">总订单：</text>
							<text class="value">{{item.order_num}}</text>
						</view>
						<view class="grid-item">
							<text class="label">总收益(元)：</text>
							<text class="value">{{item.total_revenue}}</text>
						</view>
					</view>
					<view class="btn-group">
						<u-button size="mini"
							@click="pageRoute('/merchantPages/master-manage/master-form?master_id='+item.id)">编辑</u-button>
						<u-button type="success" plain size="mini"
							@click="pageRoute('/merchantPages/master-manage/delive-fee?master_id='+item.id)">配送提成配置</u-button>
						<u-button type="primary" plain size="mini"
							@click="pageRoute('/merchantPages/master-manage/all-order?master_id='+item.id)">全部订单</u-button>
					</view>
				</view>
			</view>

			<view class="empty-data" v-if="masterList.length===0">暂无数据</view>
		</view>

		<view class="footer">
			<view class="btn-group">
				<u-button type="primary" size="large" block
					@click="pageRoute('/merchantPages/master-manage/master-form')">添加水工</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '水工管理',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		keyword: '',
		isMore: true,
		masterList: [],
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('id')) {
			console.log('传递参数', opt.id);
		}
		initData();
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function initData() {
		state.masterList = [{
			id: 1,
			avatar: state.imgHost + '/static/images/logo.png',
			nickname: '李刚',
			mobile: '15912345678',
			order_num: 12,
			total_revenue: 54,
			is_expand: false,
			towns_list: [{
				id: 1,
				areaName: '盘龙',
				townList: [{
					id: 1,
					townName: '拓东',
				}, {
					id: 2,
					townName: '鼓楼',
				}]
			}, {
				id: 1,
				areaName: '官渡',
				townList: [{
					id: 1,
					townName: '吴井',
				}, {
					id: 2,
					townName: '关上',
				}, {
					id: 3,
					townName: '太和',
				}, {
					id: 4,
					townName: '官渡街道',
				}]
			}]
		}, {
			id: 2,
			avatar: state.imgHost + '/static/images/logo.png',
			nickname: '尚佳',
			mobile: '15912345678',
			order_num: 6,
			total_revenue: 28,
			is_expand: false,
			towns_list: [{
				id: 1,
				areaName: '官渡',
				townList: [{
					id: 1,
					townName: '吴井',
				}, {
					id: 2,
					townName: '关上',
				}, {
					id: 3,
					townName: '太和',
				}, {
					id: 4,
					townName: '官渡街道',
				}]
			}]
		}];
	}

	function getList() {
		request.post('master/masterList', state.params).then(res => {
			if (res.code == 1) {
				if (state.params.page > 0) {
					state.masterList = state.masterList.concat(res.data)
				} else {
					state.masterList = res.data
				}
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					mask: true
				})
			}
		})
	}

	function handleArea(index) {
		state.masterList[index].is_expand = !state.masterList[index].is_expand;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		keyword,
		isMore,
		masterList,
	} = toRefs(state);
</script>

<style lang="scss">
	.master-manage {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.master-list {
			overflow: hidden;
			padding: 0 24rpx 50rpx;

			.master-item {
				@include f-between;
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;

				.avatar {
					width: 100rpx;
					height: 100rpx;
					background-color: #F7F7FB;
					border-radius: $radius-circle;
				}

				.info {
					flex: 1;
					margin-left: $m20;

					.name {
						color: $main-color;
						font-weight: 500;
						font-size: $font-32;
					}

					.NO,
					.phone {
						font-size: $font-24;
						color: $tips-color;
					}

					//配送区域
					.region {
						padding: $m12 0;

						.tit {
							font-size: 27rpx;
							color: $main-color;
							margin: 0 0 10rpx 0;
						}

						.bd {
							.area-item {
								display: flex;
								align-items: flex-start;
								margin: 0 0 10rpx 0;

								.area-name {
									width: 100rpx;
									text-align: left;
									font-size: 30rpx;
								}

								.town {
									flex: 1;
									display: flex;
									flex-wrap: wrap;
									align-items: center;

									.town-item {
										font-size: 26rpx;
										color: $tips-color;
										padding: 0 10rpx;
										margin: 0 20rpx 16rpx 0;
										background-color: #F7F7FB;
										border-radius: 8rpx;

									}
								}
							}
						}
					}

					.grid {
						display: flex;
						padding: $m8 0;

						.grid-item {
							display: flex;
							flex-direction: column;
							flex: 1;
							padding: $m8 0;

							.label {
								font-size: $font-24;
								color: $tips-color;
							}

							.value {
								font-size: $font-32;
								color: $primary-color;
								font-weight: 600;
							}
						}
					}

					.btn-group {
						display: flex;
						justify-content: flex-end;

						:deep(.u-button) {
							min-width: 132rpx;
							margin-left: $m20;
						}
					}
				}
			}

			.empty-data {
				margin-bottom: $m24;
				padding: $m24;
				background-color: #fff;
				border-radius: $radius-16;
				text-align: center;
				align-items: center;
				justify-content: center;
			}
		}

		.footer {
			position: fixed;
			/* 固定在底部 */
			bottom: 0;
			width: 100%;

			.btn-group {}
		}
	}
</style>